/* pages/home/index.wxss */
@import "./index.skeleton.wxss";

.home-header {
  width: 750rpx;
  height: 408rpx;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(180deg, #FEFAEC 0%, rgba(254, 250, 236, 0) 100%);

  .home-bg {
    width: 678rpx;
    height: 352rpx;
    position: absolute;
    top: 24rpx;
    left: 36rpx;
  }

  .home-header-content {
    width: 678rpx;
    height: 352rpx;
    position: absolute;
    top: 24rpx;
    left: 36rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #C99B35;

    .point-row {
      text-align: center;
      margin: 88rpx auto 30rpx;

      .point-num {
        font-size: 64rpx;
        font-weight: bold;
        color: #734200;
        line-height: 58rpx;
        letter-spacing: 1px;
        margin-right: 8rpx;
      }

      .point-login-out {
        font-size: 40rpx;
        font-weight: 500;
        color: #734200;
      }

    }

    .point-eq-num {
      font-size: 28rpx;
      font-weight: 600;
      color: #734200;
      margin: 0 8rpx;
    }

    .point-eq-icon {
      width: 30rpx;
      height: 30rpx;
      margin-left: 8rpx;
    }

    .header-btn {
      width: 212rpx;
      height: 64rpx;
      background: #FFFFFF;
      border-radius: 28rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #734200;
      line-height: 64rpx;
      text-align: center;
      position: absolute;
      left: 232rpx;
      top: 270rpx;
      padding: 0 !important;
      margin: 0 !important;
    }

    .header-btn-login {
      width: 212rpx;
      height: 64rpx;
      background: #FFFFFF;
      border-radius: 28rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #734200;
      line-height: 64rpx;
      text-align: center;
      position: absolute;
      left: 232rpx;
      top: 270rpx;
    }
  }

}

.home-body {
  display: flex;
  flex-wrap: wrap;
  padding: 0 36rpx;
  box-sizing: border-box;

  .home-list {
    width: 324rpx;
    height: 220rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.12);
    border-radius: 32rpx;
    padding: 24rpx;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 0 30rpx 30rpx 0;
    position: relative;

    .list-bg-img {
      width: 144rpx;
      height: 50rpx;
      position: absolute;
      top: 24rpx;
      right: 26rpx;
    }

    .li-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #433D36;
      line-height: 40rpx;
      margin-bottom: 8rpx;
    }

    .li-row {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-weight: 500;
      color: #757473;
      line-height: 40rpx;
      margin-bottom: 24rpx;

      .row-logo {
        width: 28rpx;
        height: 28rpx;
        margin-right: 6rpx;
      }

      .row-number {
        color: #FFA655;
        margin-left: 8rpx;
      }
    }

    .li-btn {
      width: 128rpx !important;
      height: 64rpx !important;
      background-color: #F7F7F7 !important;
      border-radius: 32rpx !important;
      font-size: 24rpx;
      font-weight: 600;
      color: #433D36;
      box-sizing: border-box;
      padding: 0 !important;
      margin: 0 !important;
    }


  }

  .home-list:nth-of-type(even) {
    margin: 0 0rpx 30rpx 0;
  }
}

// 询问弹框
.dialog-body {
  width: 100vw;
  height: 100vh;

  .dialog-cantent {
    width: 624rpx;
    background: #FFFFFF;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    opacity: 1;
    border: 4rpx solid #FFCC58;
    padding: 64rpx;
    box-sizing: border-box;
    text-align: center;

    .dialog-text {
      font-size: 40rpx;
      font-weight: 600;
      color: #804431;
    }

    .dialog-des {
      width: 384rpx;
      line-height: 52rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #804431;
      text-align: left;
      margin: 32rpx auto 0;
      max-height: 72vh;
      overflow-y: auto;
    }

    .body-btn {
      width: 496rpx;
      height: 88rpx;
      border-radius: 44rpx;
      padding: 0 !important;
      border: none !important;
      font-size: 32rpx;
      font-weight: 600;
      color: #70665A;
      line-height: 88rpx;
      text-align: center;
      margin-top: 60rpx !important;
      background: linear-gradient(180deg, #FFF5C5 0%, #FFCB55 100%);
      color: #804431;
      letter-spacing: 8rpx;
      box-sizing: border-box;
    }
  }

  .dialog-likes {
    width: 624rpx;
    background: #FFFFFF;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    opacity: 1;
    border: 4rpx solid #FFCC58;
    padding: 64rpx;
    box-sizing: border-box;

    .likes-title {
      width: 496rpx;
      font-size: 36rpx;
      font-weight: 600;
      color: #804431;
      margin-bottom: 48rpx;
      text-align: center;
    }

    .form-item {
      width: 496rpx;
      margin-bottom: 32rpx;

      .form-item-label {
        font-size: 28rpx;
        font-weight: 500;
        color: #804431;
        margin-bottom: 16rpx;
      }

      .form-item-val {
        width: 496rpx;
        height: 100rpx;
        background: #F7F7F7;
        border-radius: 24rpx;
        box-sizing: border-box;

        .val-input {
          height: 100rpx;
          padding: 0 32rpx;
        }
      }

      .form-item-val-ji {
        width: 496rpx;
        height: 140rpx;
        background: #F7F7F7;
        border-radius: 24rpx;
        box-sizing: border-box;

        .val-input {
          height: 140rpx;
          padding: 0 32rpx;
          text-align: center;
        }
      }

    }

    .body-btn {
      width: 236rpx;
      height: 88rpx;
      padding: 0 !important;
      border: none !important;
      background: #F7F7F7;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #70665A;
      line-height: 88rpx;
      text-align: center;
      margin: 16rpx 0 0 !important;
      box-sizing: border-box;
    }

    .btn-ac {
      background: linear-gradient(180deg, #FFF5C5 0%, #FFCB55 100%);
      color: #804431;
    }

    .form-des {
      font-size: 24rpx;
      font-weight: 400;
      color: #949494;
      text-align: center;
      margin-bottom: 32rpx;

      .form-des-link {
        font-size: 24rpx;
        font-weight: 500;
        color: #E5AD24;
        text-decoration: underline;
      }
    }

  }

  .dialog-share {
    position: relative;

    .share-bg1 {
      width: 632rpx;
      height: 655rpx;
    }

    .share-bg2 {
      width: 632rpx;
      height: 705rpx;
    }

    .share-content {
      width: 632rpx;
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box;
      padding: 80rpx 42rpx 0 50rpx;

      .share-header {
        width: 290rpx;
        height: 194rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: #804431;
        line-height: 48rpx;

        .share-text {
          color: #FA5622;
        }
      }

      .share-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #804431;
        line-height: 52rpx;
        text-align: center;
        margin: 0 auto 16rpx;
      }

      .share-list {
        flex-wrap: wrap;
        margin-bottom: 50rpx;

        .share-item {
          width: 150rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background: #FFF1D1;
          border-radius: 32rpx;
          border: 2rpx solid #FFBC17;
          box-sizing: border-box;
          font-size: 20rpx;
          font-weight: bold;
          color: #362D23;
          margin: 0 38rpx 28rpx 0;
          padding: 0 8rpx;
        }

        .share-item:nth-of-type(3n) {
          margin: 0 0rpx 28rpx 0;
        }
      }

      .btn-bcxc {
        width: 270rpx;
        height: 100rpx;
        flex-shrink: 0;
      }

      .btn-yqhy {
        flex-shrink: 0;
        width: 270rpx;
        height: 100rpx;
        flex-shrink: 0;
        padding: 0 !important;
        margin: 0 !important;
      }
    }

    .icon-close {
      width: 76rpx;
      height: 76rpx;
      margin-top: 42rpx;
    }
  }
}

// 分享图片
.share__position {
  position: fixed;
  bottom: 0;
  left: -100vw;
  font-weight: bold;
}

.share__canvas {
  width: 750rpx;
  height: 600rpx;
  position: relative;
  font-weight: bold;
}

.share__canvas_img {
  width: 750rpx;
  height: 600rpx;
  position: absolute;
  left: 0;
  top: 0;
}

.share__text {
  width: 450rpx;
  font-size: 37rpx;
  font-weight: bold;
  color: #804431;
  position: absolute;
  left: 66rpx;
}

.draw_canvas1 {
  font-weight: bold;
  top: 90rpx;
}

.draw_canvas2 {
  font-weight: bold;
  color: #FA5622;
  top: 150rpx;
}

.draw_canvas3 {
  font-weight: bold;
  top: 210rpx;
}

.draw_canvas4 {
  font-weight: bold;
  color: #FA5622;
  top: 270rpx;
}

.draw_canvas5 {
  font-weight: bold;
  top: 330rpx;
}

.draw_canvas6 {
  width: 408rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: #804431;
  line-height: 30rpx;
  top: 420rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}